<template>
  <el-card>
    <el-row>
      <el-form :model="state" :inline="true">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="state.menuName" placeholder="请输入菜单名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="菜单路径" prop="menuPath">
          <el-input v-model="state.menuPath" placeholder="请输入菜单路径" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getMenuList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="searchDiv">
      <el-button v-if="hasPer('menu:add')" type="primary" icon="Plus" @click="editMenuFun">新增</el-button>
    </el-row>
    <el-table :data="state.tableData" row-key="menuId" :border="true">
      <el-table-column label="菜单名称" prop="name"></el-table-column>
      <el-table-column label="菜单路径" prop="path"></el-table-column>
      <el-table-column label="组件" prop="component"></el-table-column>
      <el-table-column label="权限" prop="permission"></el-table-column>
      <el-table-column label="类型" prop="type">
        <template #default="scope">
          <span v-if="scope.row.type === '1'">菜单</span>
          <span v-else-if="scope.row.type === '2'">页面</span>
          <span v-else-if="scope.row.type === '3'">按钮</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort"></el-table-column>
      <el-table-column label="操作" prop="option" width="180px" align="center">
        <template #default="scope">
          <el-button v-if="hasPer('menu:edit')" type="primary" @click="editMenuFun(JSON.parse(JSON.stringify(scope.row)))">编辑</el-button>
          <el-button v-if="hasPer('menu:del')" type="danger" @click="delMenuFun(scope.row.menuId, scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <edit-menu v-model:dialog-visible="dialogVisible" :menu-obj="state.menuObj" @get-list="getMenuList"></edit-menu>
</template>

<script setup>
import {getMenuTable, delMenu} from "../../api/menu/sysMenu";
import {errorMsg, infoMsg, successMsg} from "../../utils/message";
import {hasPer} from "../../utils/common";
import editMenu from "./editMenu";
import {onMounted, reactive, ref} from "vue";
import {ElMessageBox} from "element-plus";

const dialogVisible = ref(false)

const state = reactive({
  menuName: '',
  menuPath: '',
  menuObj: {},
  tableData: []
})

onMounted(() => {
  getMenuList()
})

//  获取菜单列表
const getMenuList = () => {
  const params = {
    menuName: state.menuName,
    menuPath: state.menuPath
  }
  getMenuTable(params).then(res => {
    if (res.code == 200){
      state.tableData = res.data
    } else {
      errorMsg(res.message)
    }
  })
}
//  编辑菜单
const editMenuFun = (row) => {
  dialogVisible.value = true
  state.menuObj = row.menuId ? row : {}
}
//  删除菜单
const delMenuFun = (menuId, name) => {
  ElMessageBox.confirm('确定删除菜单【'+ name + '】？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    delMenu({menuId: menuId}).then(res => {
      if (res.code == 200){
        successMsg(res.data)
        getMenuList()
      } else {
        errorMsg(res.message)
      }
    })
  }).catch(() => {
    infoMsg('操作已取消')
  })
}
</script>

<style scoped>

</style>